/*
 * Copyright (c) 2021 chwxu@outlook.com
 *
 * Redistribution and use in source and binary forms, with or without modification,
 * are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright notice, this list of
 *    conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above copyright notice, this list
 *    of conditions and the following disclaimer in the documentation and/or other materials
 *    provided with the distribution.
 *
 * 3. Neither the name of the copyright holder nor the names of its contributors may be used
 *    to endorse or promote products derived from this software without specific prior written
 *    permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
 * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
 * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
 * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

<template>
  <BasicDrawer v-bind="$attrs" :isDetail="true" title="申请成为成员单位">
    <div>
      <a-row>
        <a-col :span="8" style="margin-left:50px;">
          <h2>为什么要加入OpenHarmony？</h2>
          <ol>
            <li>开发者通过直接参与OpenHarmony项目开发工作，分享自己的劳动成果，为OpenHarmony生态的持续发展作出贡献</li>
            <li>通过参与OpenHarmony社区共建，认识更多的开发者，实现共建、共治、共享</li>
            <li>签订开源捐赠协议，并约定捐赠方式、捐赠金额、资金用途及使用方式，让所捐赠的知识产权及资金发挥应有的社会价值</li>
            <li>捐赠人依照法律、行政法规的规定，可以享受税收优惠</li>
            <li>捐赠人依照《项目群管理制度》规定，可以根据捐赠人类别分别享受不同的权益并承担相应的义务</li>
          </ol>
          <h2>如何成为OpenHarmony项目成员单位？</h2>
          <ol>
            <li>个人和组织首先需要通过捐赠资金，成为开放原子基金会成员</li>
            <li>个人和组织通过捐赠资金，成为开源基金会成员</li>
            <li>OpenHarmony成员包括：A类捐赠人、B类捐赠人、C类捐赠人、特殊捐赠人</li>
            <li>加入到具体的OpenHarmony项目或工作组中，参与贡献</li>
          </ol>
        </a-col>
        <a-col :span="12">
          <BasicForm
            :labelWidth="100"
            :schemas="schemas"
            :actionColOptions="{ span: 24 }"
            @submit="handleSubmit"
          />
        </a-col>
      </a-row>
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Row, Col } from 'ant-design-vue';
import { BasicDrawer } from '/@/components/Drawer';
import { BasicForm, FormSchema } from '/@/components/Form/index';
// import { MarkDown } from '/@/components/Markdown';
import { useMessage } from '/@/hooks/web/useMessage';
// import { sigApplicationAction } from '/@/api/sys/form_action';

const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '姓名',
    componentProps: {
      placeholder: '您的姓名',
    },
    required: true,
  },
  {
    field: 'email',
    component: 'Input',
    label: '邮箱',
    componentProps: {
      placeholder: '您的邮箱',
    },
    required: true,
  },
  {
    field: 'phone',
    component: 'Input',
    label: '电话',
    componentProps: {
      placeholder: '您的电话',
    },
    required: true,
  },
  {
    field: 'company',
    component: 'Input',
    label: '公司',
    componentProps: {
      placeholder: '您的公司',
    },
    required: true,
  },
  {
    field: 'goal',
    component: 'Select',
    label: '捐赠意向',
    required: true,
    colProps: {
      span: 10,
    },
    componentProps: {
      placeholder: '您希望成为哪一类捐赠人？',
      options: [
        {
          label: 'A类',
          value: 'A类',
          key: 'type_A',
        },
        {
          label: 'B类',
          value: 'B类',
          key: 'type_B',
        },
        {
          label: 'C类',
          value: 'C类',
          key: 'type_C',
        },
      ],
    },
  },
];

function inputCheck(name, email, phone, company) {
  if (isNaN(phone) || !/^\d+$/.test(phone)) {
    return false;
  }
  return true;
}

async function handleSubmit(values: any) {
  const { createMessage } = useMessage();
  try {
    // createMessage.success('click search,values:' + JSON.stringify(values));
    // console.log(values.name, values.email, values.phone, values.company, values.goal);
    if (inputCheck(values.name, values.email, values.phone, values.company)) {
      window.open(
        `mailto:qigang@openatom.org?subject=[成员申请]&body=
        姓名：${values.name} <br />
        邮箱：${values.email} <br />
        电话：${values.phone} <br />
        公司：${values.company} <br />
        捐赠意向：${values.goal} <br />
        `,
      );
    } else {
      createMessage.error("Invalid Input! 非法输入！");
    }
    // const actionStatus = await sigApplicationAction(toRaw(values));
    // if (actionStatus) {
    //   console.log(actionStatus);
    //   if (actionStatus.result) {
    //     createMessage.success(JSON.stringify(actionStatus));
    //   } else {
    //     createMessage.error(JSON.stringify(actionStatus));
    //   }
    // } else {
    //   createMessage.error('No return value.');
    //   console.log('No return value.');
    // }
  } catch (error) {
    console.error(error);
  }
}

export default defineComponent({
  components: { ARow: Row, ACol: Col, BasicDrawer, BasicForm },
  setup() {
    // const { createMessage } = useMessage();
    return {
      schemas,
      handleSubmit,
    };
  },
});
</script>
